<template>
  <div class="app-container">
    <h2 class="text-center">{{ paper.paperName}} </h2>
    <h3 class="text-center"> 试卷总分:{{paper.totalMark}}</h3>
    <el-row :gutter="24" style="margin-top: 50px">
      <el-col :span="8" class="text-center">
        考生姓名：{{ scoreData.createBy }}
      </el-col>

      <el-col :span="8" class="text-center">
        考试时长：{{ paper.totalTime }}分钟
      </el-col>

      <el-col :span="8" class="text-center">
        考试得分：{{ scoreData.totalScore }}
      </el-col>

    </el-row>
<!--    <el-col :span="24">-->
<!--      <el-card style="margin-bottom: 30px">-->
<!--        <p class="card-title"> <el-tag type="info" effect="dark">考试信息:</el-tag> </p>-->
<!--        <el-row :gutter="10" class="card-line" style="float: left " >-->
<!--          <el-tag type="success" style="font-size: medium">试卷名称: {{paper.paperName}}</el-tag>-->
<!--        </el-row>-->
<!--        <el-row :gutter="10" class="card-line" style="padding-left: 150px; float: left">-->
<!--          <el-tag type="danger" style="font-size: medium">考生姓名: {{scoreData.createBy}}</el-tag>-->
<!--        </el-row>-->
<!--        <el-row :gutter="10" class="card-line" style="padding-left: 150px; float: left">-->
<!--          <el-tag effect="light" style="font-size: medium">考试得分: {{scoreData.totalScore}} </el-tag>-->
<!--        </el-row>-->
<!--      </el-card>-->
<!--    </el-col>-->
    <el-col :span="24">
    <el-card class="content-h" style="margin-top: 20px">
      <span v-for="(item, index) in hisDetailData" :key="item.quesId">
          <!-- 单选题 -->
          <div v-show="item.quesType == '单选题'">
            <div>
              <div>
              <p class="card-title" style="color: #00afff">单选题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
              <el-tag style="color: blue; font-size: medium" > 你的答案 :{{item.userAnswer}}</el-tag>
               <el-tag style="color: green; font-size: medium" > 正确答案 : {{item.trueAnswer}}</el-tag>
            </div>
              <el-row :gutter="24" class="card-line">
                 <el-radio-group  style="display: flex; flex-direction: column">
                 <el-radio   label="A" style="margin-top: 40px">A : {{item.selContA}}</el-radio>
                 <el-radio  label="B" style="margin-top: 40px">B : {{item.selContB}}</el-radio>
                 <el-radio  label="C" style="margin-top: 40px">C : {{item.selContC}}</el-radio>
                 <el-radio  label="D" style="margin-top: 40px">D : {{item.selContD}}</el-radio>
              </el-radio-group>
              </el-row>
              <el-divider></el-divider>
          </div>
        <!-- 多选题 -->
          <div v-show="item.quesType == '多选题'">
            <div>
              <p class="card-title" style="color: yellowgreen">多选题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <el-tag style="color: blue; font-size: medium" >你的答案 :{{item.userAnswer}}</el-tag>
            <el-tag style="color: green; font-size: medium" >正确答案 : {{item.trueAnswer}}</el-tag>
            <div>
              <el-checkbox-group v-model = item.userAnswer style="display: flex; flex-direction: column">
                  <el-checkbox  label="A" style="margin-top: 40px">A: {{item.selContA}}</el-checkbox>
                  <el-checkbox  label="B" style="margin-top: 40px">B: {{item.selContB}}</el-checkbox>
                  <el-checkbox   label="C" style="margin-top: 40px">C: {{item.selContC}}</el-checkbox>
                  <el-checkbox   label="D" style="margin-top: 40px">D: {{item.selContD}}</el-checkbox>
              </el-checkbox-group>
            </div>
              <el-divider></el-divider>
          </div>
        <!-- 问答题 -->
            <div v-show="item.quesType == '简答题'">
            <div>
           <p class="card-title" style="color: yellowgreen">问答题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="item.userAnswer">
            </el-input>
                <el-divider></el-divider>
            </div>
          </div>
        <!-- 判断题 -->
          <div v-show= "item.quesType== '判断题'">
            <div>
              <p class="card-title" style="color: red">判断题</p>
              <p>{{index + 1 }}.{{item.quesName}}:</p>
              <el-tag style="color: blue; font-size: medium" >你的答案 :{{item.userAnswer}}</el-tag>
              <el-tag style="color: green; font-size: medium" >正确答案 : {{item.trueAnswer}}</el-tag>
              <el-radio-group  style="display: flex; flex-direction: column">
                 <el-radio  label="true" style="margin-top: 40px">true</el-radio>
                 <el-radio  label="false" style="margin-top: 40px">false</el-radio>
              </el-radio-group>
            </div>
              <el-divider></el-divider>
          </div>
      </span>
    </el-card>
    </el-col>

  </div>

</template>

<script>
import {hisDetailList, scoreDetail} from "@/api/store/detail";
import {examMarkList} from "@/api/store/detail";
import {paperById, paperQuestionList} from "@/api/store/paper";

export default {
  name: "history",
  data() {
    return {
      answers:"", //问答题
      currentIndex:0, //当前题目
      selectRadio:[],
      selectsRadioList:[],
      judge:undefined,
      paperData:{}, //试卷数据
      paper:{},
      hisDetailData:{},
      scoreData:{},
      totalTime:null,
      checkQuetionList:[1], //当前已做的题目
      paperId:undefined, //试卷id
      taskId : null, //任务id
      duration: null, //考试时长倒计时
      startTime : null, //开始时间
      endTime : null , //结束时间
      quesOptions:[],
      quesName:undefined,
      quesId: undefined,
      form:{},
      selContA:'',
      selContB:'',
      selContC:'',
      selContD:'',
      optionList:[],
      userAnswerId:'',
      centerDialogVisible:false,
      userAnswer:undefined,
    };
  },
  created() {
    this.getRouterData();
  },
  methods:{
    //获取初始化数据
    getRouterData() {
      this.paperId = this.$route.params.paperId;
      paperQuestionList({paperId: this.$route.params.paperId}).then((response) => {
        this.paperData = response.data;
        this.total = response.total;
        this.loading = false;
      });
      scoreDetail({userId: this.$route.params.userId, paperId: this.$route.params.paperId}).then((response => {
        this.scoreData = response.data;
        this.loading = false;
      }));

      paperById({paperId: this.$route.params.paperId}).then((response) => {
        this.paper = response.data;
        this.total = response.total;
        this.loading = false;
        this.startTime = new Date()
        this.startDate = Date.parse(new Date())
        this.endTime = this.startDate + 60 * response.data.totalTime * 1000;//加考试时长的时间戳 考试时长单位为分钟
      });
      hisDetailList({userId: this.$route.params.userId, paperId: this.$route.params.paperId}).then((response => {
        this.hisDetailData = response.data;
        this.loading = false;
      }));
    },

    add() {
      if (this.currentIndex < this.paperData.length - 1) {
        //储存当前题目的值 更新答案
        let question = this.paperData[this.currentIndex];
        let down = this.paperData[this.currentIndex + 1];
        if (question.quesType == "多选题") {
          question.selectsRadioList = this.selectsRadioList;
        } else if (question.quesType == "单选题") {
          question.selectRadio = this.selectRadio;
        } else if (question.quesType == "简答题") {
          question.answers = this.answers;
        } else if (question.quesType == "判断题") {
          question.judge = this.judge;
        }
        //获取下一道题目的答案，进行渲染
        if (down.quesType == "多选题") {
          this.selectsRadioList =
            down.selectsRadioList == undefined ? [] : down.selectsRadioList;
        } else if (down.quesType == "单选题") {
          this.selectRadio =
            down.selectRadio == undefined ? null : down.selectRadio;
        } else if (question.quesType == "简答题") {
          this.answers =
            down.answers == undefined ? null : down.answers;
        } else if (question.quesType == "判断题") {
          this.judge = down.judge == undefined ? null : down.judge;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex + 1;
      }
    },
    //上一题
    subtract() {
      if (this.currentIndex > 0) {
        //储存上一题的选中值
        let question = this.paperData[this.currentIndex];
        let up = this.paperData[this.currentIndex - 1];
        //获取当前题目，记性答案的储存更新
        if (question.quesType == "多选题") {
          question.selectsRadioList = this.selectsRadioList;
        } else if (question.quesType == "单选题") {
          question.selectRadio = this.selectRadio;
        } else if(question.quesType == "简答题"){
          question.answers = this.answers;
        }
        //获取上一道题 进行答案的渲染
        if (up.quesType == "多选题") {
          this.selectsRadioList =
            up.selectsRadioList == undefined ? [] : up.selectsRadioList;
        } else if (up.quesType == "单选题") {
          this.selectRadio =
            up.selectRadio == undefined ? null : up.selectRadio;
        } else if(question.quesType == "简答题"){
          this.answers =
            up.answers == undefined ? null : up.answers;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex - 1;
      }
    },

}
}
</script>

<style scoped>

</style>
